<template>
  <div class="tpl38-head">
    <div class="search_goods mob47">
      <a @click="JumpName('item-class-list')" class="ico_menu"><i></i></a>
      <div class="search_form">
        <div class="formitem">
          <button type="submit" class="j-search-button btn_sele" @click="searchList"></button>
          <input type="text" name="title" placeholder="搜索商品" v-model="keyword" @confirm="searchList"/>
        </div>
      </div>
      <a @click="JumpName('member')" class="ico_user"><i></i></a>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import small from '@/smallapp/small.js'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    props: {
      tplItemData: {
        type: Object
      },
      supplierId: {
        type: [Number, String]
      }
    },
    data() {
      return {
        showIndicators: true,
        autoplay: true,
        imgadvWxH: 0,
        keyword: ''
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
      // TODO 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight=event.detail.height
        if(imgHeight>parseFloat(this.imgadvWxH)){
          this.imgadvWxH=imgHeight+'px'
        }
      },
      searchList() {
        const sid = small.globalData.shopId
        // console.log('&searchList', sid)
        if (sid == '8004497' && this.supplierId) {
          // console.log('&searchList-supplierId', this.supplierId)
          this.$JumpName(this, 'item-list', { title: this.keyword, supplier: this.supplierId })
        } else {
          this.$JumpName(this, 'item-list', { title: this.keyword })
        }
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      }
    },
    mounted() {
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl38-head{
    .search_goods{
      width:100%;
      text-align: center;
      padding: 24px 0;
      &>a{
        display: inline-block;
        *display:inline;
        *zoom:1;
        width:64px;
        height:64px;
        border-radius:50%;
        background:#fff;
        text-align: center;
        color: #666;
        font-size:24px;
        i{
          display: block;
          width:100%;
          height:100%;
          background-repeat:no-repeat;
          background-position:center;
          background-size:47%;
        }
        &.ico_menu{
          margin-right:4px;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl36/class_icon.png);
          }
        }
        &.ico_user{
          margin-left:4px;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl36/user_icon.png);
          }
        }
      }
      .search_form{
        position:relative;
        display: inline-block;
        width: 72%;
        background: #fff;
        vertical-align: top;
        border-radius: 64px;
        overflow:hidden;
        text-align:center;
        border:2px solid #efefef;
        .btn_sele{
          position:absolute;;
          left:14px;
          top:10px;
          width: 40px;
          height: 40px;
          border: none;
          background-color: transparent;
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63select.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 70%;
        }
        input{
          width: 75%;
          height: 60px;
          line-height: 60px;
          border: none;
          background: transparent;
        }
      }
    }
  }
</style>
